<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import radarChart from './radar.vue'
import { leftabData, leftBottomData, switchvalue1, switchvalue2, projectID, projectoptions, projectName, switchloading1, switchloading2, gethomeData, leftYouPingMessage, radarIndicator, refreshLoading, homeData, leftBottomRHZData, qttype, btype, szkgtype, bid, yl } from '../common'



const emit = defineEmits(["openElMessageBoxFn"])





function handleSelect(key) {
  projectID.value = key
  gethomeData(true)
  // projectName.value = projectoptions.value[0].label
}


function changeswitch1(e) {
  console.log(e, 'e')
  switchloading1.value = true
  ElMessageBox.confirm(
    '是否要修改状态?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {


      let Q = {
        "projectid": projectID.value,
        "statu": switchvalue1.value ? 1 : 0,
        "type": 0
      }
      HomePageControllerUpdateyblyjzt(Q).then(() => {
        toast('状态修改成功')
        gethomeData()

      }).finally(() => switchloading1.value = false)


    })
    .catch(() => {
      switchloading1.value = false
      switchvalue1.value = !e
    })
}
function changeswitch2(e) {
  switchloading2.value = true

  ElMessageBox.confirm(
    '是否要修改状态?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {


      let Q = {
        "projectid": projectID.value,
        "statu": switchvalue2.value ? 1 : 0,
        "type": 1
      }
      HomePageControllerUpdateyblyjzt(Q).then(() => {
        toast('状态修改成功')
      }).finally(() => switchloading2.value = false)


    })
    .catch(() => {
      switchloading2.value = false
      switchvalue2.value = !e
    })





}

const openElMessageBox = () => emit('openElMessageBoxFn')

const switchloading3 = ref(false)
const switchloading4 = ref(false)



function changeswitch3(e) {
  switchloading3.value = true

  ElMessageBox.confirm(
    '是否要修改状态?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {


      let Q = {
        "projectid": projectID.value,
        // "statu": szkgtype.value ? 1 : 0,
        // "type": 1
        bid: bid.value,
        zbzt: szkgtype.value ? 1 : 0
      }
      HomePageControllerupdateszd(Q).then(() => {
        toast('状态修改成功')
      }).catch(() => {
        szkgtype.value = !e
      }).finally(() => switchloading3.value = false)


    })
    .catch(() => {
      switchloading3.value = false
      szkgtype.value = !e
    })





}

function changeswitch4(e) {
  switchloading4.value = true

  ElMessageBox.confirm(
    '是否要修改状态?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {


      let Q = {
        "projectid": projectID.value,
        bid: bid.value,
        qtzt: qttype.value ? 1 : 0
      }
      HomePageControllerupdateqdtz(Q).then(() => {
        toast('状态修改成功')
      }).catch(() => {
        qttype.value = !e
      }).finally(() => switchloading4.value = false)


    })
    .catch(() => {
      switchloading4.value = false
      qttype.value = !e
    })





}



</script>

<template>
  <!-- xwmd:(w-[30.9%]) xwlg:(w-[31.3%]) -->
  <div class="  xwxs:(w-full) xwsm:(w-[28.9%]) ">
    <div class=" h-[13%] flex items-center">

    </div>

    <div
      class="flex flex-col   mb-[16px] rounded-[28px]  px-[24px] xwxs:(h-[1200px] pt-[200px]) xwsm:(h-[45.6%] py-[16px])"
      style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">



      <n-dropdown size="huge" trigger="hover" :options="projectoptions" @select="handleSelect">
        <div class="flex items-center">
          <img class=" xwxs:(w-[180px] h-[180px]) xwsm:(w-[30px] h-[30px])"
            src="../../../assets/home/moxingguanlian.png" alt="">
          <div
            class="ml-[12px] font-semibold font_Electronic xwxs:(text-[56px] leading-[56px] ) xwsm:(text-[30px] leading-[23px] )"
            style="color: #10735C;">
            {{ projectName }}
          </div>
        </div>
      </n-dropdown>






      <div class="flex  flex-wrap xwmd:(mt-[45px]) xwlg:(mt-[25px])">

        <el-row class="w-full">
          <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item, index) in leftabData" :key="index">
            <div class="flex flex-col justify-center items-center  xwmd:(mb-[25px]) xwlg:(mb-[25px])">
              <div
                class=" text-black mb-[8px]   xwxs:(text-[56px]) xwmd:(text-[26px] leading-[19px]) xwlg:(text-[16px] leading-[19px])">
                {{ item.name }}
              </div>
              <div class=" leading-[19px] xwmd:(text-[26px]) xwlg:(text-[16px])" style="color: #026700;">{{ item.value
              }}
              </div>
            </div>
          </el-col>
        </el-row>


      </div>



      <div class="flex-1 flex justify-center items-center pt-[50px] relative" v-if="radarIndicator.length > 0">


        <radarChart></radarChart>


      </div>

    </div>

    <div class=" xwxs:(h-[66px]) xwsm:(h-[0px])"></div>
    <div
      class="flex flex-col  rounded-[28px]  py-[16px] px-[24px] relative xwxs:(h-[1200px] ) xwsm:(h-[38.2%]) xwmd:(h-[38.2%]) xwlg:(h-[36.2%])"
      style="background: #FFFFFF;box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);">
      <div class="flex items-center">
        <img class=" xwxs:(w-[180px] h-[180px]) xwsm:(w-[30px] h-[30px])" src="../../../assets/home/shiyan.png" alt="">
        <div
          class="ml-[12px] font-semibold font_Electronic xwxs:(text-[56px] leading-[56px] ) xwsm:(text-[30px] leading-[23px] )"
          style="color: #10735C;">{{
            homeData.ypxxrhzxx == 1 ? '润滑脂信息' : '油品信息' }}</div>
        <el-button class="w-[90px] h-[30px] rounded-[10px] flex justify-center items-center ml-auto " color="#009757"
          @click="openElMessageBox()">
          <span class="text-[16px] font-medium text-white">编辑 </span>
        </el-button>
      </div>




      <div class="ml-[8px]  h-[100%] flex flex-col justify-around  xwmd:(mt-[20px]) xwlg:(mt-[10px])"
        v-if="homeData.ypxxrhzxx == 1">

        <template v-for="(i, n) in leftBottomRHZData" :key="n">

          <div class="flex " v-if="i.show">
            <div
              class="flex items-center whitespace-nowrap font-medium min-w-[100px] xwxs:(text-[56px] leading-[56px] ) xwmd:(text-[26px] leading-[18px]) xwlg:(text-[15px] leading-[18px])">
              {{ i.name }}
            </div>

            <template v-if="i.name == '功率 :'">
              <div class="w-full flex items-center">
                <div class="flex mx-[20px] items-center">0</div>
                <div class="flex-1">
                  <el-progress status="success" striped striped-flow :duration="10" :text-inside="true"
                    :stroke-width="15" :percentage="i.value">
                    <span>{{ i.value }}</span>
                  </el-progress>

                </div>
                <div class="flex ml-[20px] items-center">100</div>
              </div>
            </template>

            <div v-else class=" l_line xwmd:(text-[26px] leading-[18px]) xwlg:(text-[15px] leading-[18px])">
              <n-tooltip trigger="hover" placement="right">
                <template #trigger>
                  <div
                    class="l_line xwxs:(text-[56px] leading-[56px] )  xwmd:(text-[26px] leading-[18px]) xwlg:(text-[15px] leading-[18px])">
                    {{ i.value }} <span class="ml-[30px]" v-if="i.name == '运行时长 : ' || i.name == '间隔时长 :'">min</span>
                  </div>
                </template>
                <div class="text-white xwxs:(text-[56px] )  xwmd:(text-[26px] ) xwlg:(text-[15px])">
                  {{ i.value }}
                </div>
              </n-tooltip>




            </div>







          </div>
        </template>


        <div class="flex justify-between">

          <el-switch active-color="#10b981" :loading="switchloading3" @change="changeswitch3" v-model="szkgtype"
            size="small" active-text="" inactive-text="自动状态(关/开)" />



          <div class="flex items-center ">


            <div class="mr-[5px]  xwxs:(text-[56px]  ) xwmd:(text-[26px]) xwlg:(text-[15px])">泵状态 :</div>
            <template v-if="btype">
              <n-tooltip trigger="hover" placement="right">
                <template #trigger>
                  <div class="w-[18px] h-[18px] rounded-[20px] bg-green-600" style="background-color: #10b981;"></div>
                </template>
                <div class="text-white">
                  在线
                </div>
              </n-tooltip>
            </template>

            <template v-else>
              <n-tooltip trigger="hover" placement="right">
                <template #trigger>
                  <div class="w-[18px] h-[18px] rounded-[20px] bg-red-500"></div>
                </template>
                <div class="text-white">
                  离线
                </div>
              </n-tooltip>
            </template>
          </div>








        </div>
        <div class="flex items-center ">

          <el-switch active-color="#10b981" :loading="switchloading4" @change="changeswitch4" v-model="qttype"
            active-text="" size="small" inactive-text="启停状态(关/开)" />

          <div style="margin-left: auto;" class="xwxs:(text-[56px]  ) xwmd:(text-[26px]) xwlg:(text-[15px])">
            压力：{{ yl }}Mpa
          </div>
        </div>

      </div>


      <div v-else class="ml-[8px]  h-[100%] flex flex-col justify-around  xwmd:(mt-[20px]) xwlg:(mt-[10px])">
        <div class="flex " v-for="(i, n) in leftBottomData" :key="n">
          <div class="leading-[18px] font-medium min-w-[100px] xwmd:(text-[26px]) xwlg:(text-[15px])">{{ i.name }}</div>


          <template v-if="i.value == 1">
            <n-tooltip trigger="hover" placement="right">
              <template #trigger>
                <div class="w-[18px] h-[18px] rounded-[20px] bg-green-600" style="background-color: #10b981;"></div>
              </template>
              <div class="text-white">
                运行中
              </div>
            </n-tooltip>
          </template>

          <template v-else-if="i.value == 0">
            <n-tooltip trigger="hover" placement="right">
              <template #trigger>
                <div class="w-[18px] h-[18px] rounded-[20px] bg-red-500"></div>
              </template>
              <div class="text-white">
                关闭
              </div>
            </n-tooltip>
          </template>



          <div v-else class="leading-[18px] xwmd:(text-[26px]) xwlg:(text-[15px])">{{ i.value }}</div>







        </div>


        <div class="flex justify-between">
          <!-- leftYouPingMessage -->
          <el-switch active-color="#10b981" :loading="switchloading1" @change="changeswitch1" v-model="switchvalue1"
            size="small" active-text="" inactive-text="滤油器控制(关/开)" />



          <div class="flex items-center ">


            <div class="mr-[5px]  xwmd:(text-[26px]) xwlg:(text-[15px])">滤油器状态 :</div>
            <template v-if="leftYouPingMessage.oilStatus == 1">
              <n-tooltip trigger="hover" placement="right">
                <template #trigger>
                  <div class="w-[18px] h-[18px] rounded-[20px] bg-green-600" style="background-color: #10b981;"></div>
                </template>
                <div class="text-white">
                  运行中
                </div>
              </n-tooltip>
            </template>

            <template v-else-if="leftYouPingMessage.oilStatus == 0">
              <n-tooltip trigger="hover" placement="right">
                <template #trigger>
                  <div class="w-[18px] h-[18px] rounded-[20px] bg-red-500"></div>
                </template>
                <div class="text-white">
                  关闭
                </div>
              </n-tooltip>
            </template>
          </div>


        </div>
        <el-switch active-color="#10b981" :loading="switchloading2" @change="changeswitch2" v-model="switchvalue2"
          active-text="" size="small" inactive-text="油泵控制(开/关)" />



      </div>









    </div>




  </div>
</template>

<style scoped>
.l_line {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
}

input {
  border: 1px solid #B5C7C7;
  border-radius: 6px;
  padding: 0 35px 0 10px;
}

input:focus {
  outline: none;
  border: 1px solid #1a9648;
}

input::placeholder {
  font-size: 14px;
  color: #969C94;

}

:deep(.active-ring-name) {
  display: none !important;

}

:deep(.dv-digital-flop) {
  /* height: 100px !important; */
}
</style>
